<template>
  <div class="upload-file-type-view">
    <div class="upload-file-type-view-header" style="margin-bottom: 6px">
      <div class="upload-file-type-view-header-left">
        附件类型：<ElTag
          v-for="(item, index) in fileTypeOptions"
          :key="item.value"
          :style="{ marginLeft: index > 0 ? '4px' : '' }"
          style="cursor: pointer"
          size="medium"
          @click="openFilePicker(item)">
          <span v-if="!inputDisabled && item.required" style="color: #f56c6c">*</span>{{ item.label }}
        </ElTag>
      </div>
      <div class="upload-file-type-view-header-right">
        <slot name="header-left"></slot>
      </div>
    </div>
    <Attachment ref="attachment" :unid="unid" :type="type" :model="model" :file-type-options="fileTypeOptions" hide-upload v-bind="$attrs">
      <template #bottom="{accept}">
        <div class="el-upload__text" style="margin-top: 20px;">
          <ElDropdown @command="openFilePicker">
            <ElButton type="primary" size="medium">添加文件</ElButton>
            <template #dropdown>
              <ElDropdownMenu>
                <ElDropdownItem v-for="item in fileTypeOptions" :key="item.value" :command="item">{{item.label}}</ElDropdownItem>
              </ElDropdownMenu>
            </template>
          </ElDropdown>
        </div>
        <div v-if="accept !== '*/*'" class="el-upload__tip">
          只能上传{{ accept.replace(/,/g, '/') }}文件
        </div>
      </template>
    </Attachment>
  </div>
</template>

<script>
  export default {
    name: 'Attachments',
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
    props: {
      model: String,
      disabled: Boolean,
      unid: String,
      fileTypeOptions: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        type: 'other'
      }
    },
    computed: {
      inputDisabled() {
        return this.disabled || (this.elForm || {}).disabled
      }
    },
    methods: {
      getFileList(){
        return this.$refs.attachment.fileList
      },
      openFilePicker(option) {
        if (!this.inputDisabled) {
          this.type = option.value
          this.$refs.attachment.openUpload()
        }
      }
    }
  }
</script>

<style lang="scss">
  .el-form-item.is-error .upload-file-type-view-files {
    border: 1px red solid;
  }

  .upload-file-type-view {
    .upload-file-type-view-header {
      @include flex-row;

      .upload-file-type-view-header-left {
        @include flex-item;
      }

      .upload-file-type-view-header-right {
        span {
          margin-left: 15px;
          color: #409eff;
          font-style: normal;
          cursor: pointer;
        }
      }
    }

    .el-upload__text{
      color: #606266;
      font-size: 14px;
      text-align: center;
      em {
        color: var(--color-primary);
        font-style: normal;
      }
    }

    .el-upload__tip {
      padding-bottom: 10px;
      font-size: 12px;
      color: #606266;
      margin-top: 7px;
    }
  }
</style>
